<template>
  <div class="dashboard">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div>
          <h1 class="page-title">工作台</h1>
          <p class="page-subtitle">欢迎回来，今天是个好日子！</p>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="showUploadDialog = true">
            <el-icon><Upload /></el-icon>
            上传文档
          </el-button>
          <el-button @click="$router.push('/projects')">
            <el-icon><Plus /></el-icon>
            新建项目
          </el-button>
        </div>
      </div>
    </div>

    <!-- 数据概览卡片 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="6" :lg="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon primary">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ documentStore.totalDocuments }}</div>
                <div class="stat-label">总文档数</div>
                <div class="stat-trend positive">
                  <el-icon><TrendCharts /></el-icon>
                  +12 本周
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="12" :sm="6" :lg="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon success">
                <el-icon><FolderOpened /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ projectStore.totalProjects }}</div>
                <div class="stat-label">活跃项目</div>
                <div class="stat-trend positive">
                  <el-icon><TrendCharts /></el-icon>
                  +2 本月
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="12" :sm="6" :lg="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon warning">
                <el-icon><Search /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">847</div>
                <div class="stat-label">今日搜索</div>
                <div class="stat-trend negative">
                  <el-icon><Bottom /></el-icon>
                  -5% 昨日
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="12" :sm="6" :lg="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon info">
                <el-icon><Timer /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">1.8s</div>
                <div class="stat-label">平均响应</div>
                <div class="stat-trend positive">
                  <el-icon><TrendCharts /></el-icon>
                  -0.3s 优化
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 主要内容区域 -->
    <el-row :gutter="20" class="main-content">
      <!-- 最近文档 -->
      <el-col :xs="24" :lg="16">
        <el-card class="content-card" shadow="never">
          <template #header>
            <div class="card-header">
              <div class="header-title">
                <el-icon><Document /></el-icon>
                <span>最近文档</span>
              </div>
              <el-button text type="primary" @click="$router.push('/documents')">
                查看全部
                <el-icon><ArrowRight /></el-icon>
              </el-button>
            </div>
          </template>
          
          <div class="document-list">
            <div
              v-for="doc in documentStore.recentDocuments.slice(0, 6)"
              :key="doc.id"
              class="document-item"
              @click="previewDocument(doc)"
            >
              <div class="document-icon" :class="doc.type">
                <el-icon>
                  <Document v-if="doc.type === 'pdf'" />
                  <Reading v-else-if="doc.type === 'doc'" />
                  <Present v-else-if="doc.type === 'ppt'" />
                  <Picture v-else />
                </el-icon>
              </div>
              <div class="document-info">
                <div class="document-title">{{ doc.title }}</div>
                <div class="document-meta">
                  <span class="document-project">{{ doc.project }}</span>
                  <span class="document-time">{{ formatTime(doc.updateTime) }}</span>
                  <span class="document-size">{{ doc.size }}</span>
                </div>
              </div>
              <div class="document-actions">
                <el-button circle size="small" @click.stop="previewDocument(doc)">
                  <el-icon><View /></el-icon>
                </el-button>
                <el-button circle size="small" @click.stop="downloadDocument(doc)">
                  <el-icon><Download /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 常用项目 -->
      <el-col :xs="24" :lg="8">
        <el-card class="content-card" shadow="never">
          <template #header>
            <div class="card-header">
              <div class="header-title">
                <el-icon><FolderOpened /></el-icon>
                <span>常用项目</span>
              </div>
              <el-button text type="primary" @click="$router.push('/projects')">
                查看全部
                <el-icon><ArrowRight /></el-icon>
              </el-button>
            </div>
          </template>
          
          <div class="project-list">
            <div
              v-for="project in projectStore.activeProjects.slice(0, 4)"
              :key="project.id"
              class="project-item"
              @click="viewProject(project)"
            >
              <div class="project-color" :style="{ background: project.color }"></div>
              <div class="project-info">
                <div class="project-name">{{ project.name }}</div>
                <div class="project-meta">
                  <span class="project-docs">{{ getProjectDocumentCount(project) }} 个文档</span>
                  <span class="project-time">{{ formatTime(project.updateTime) }}</span>
                </div>
                <div class="project-progress">
                  <el-progress 
                    :percentage="project.progress" 
                    :stroke-width="4" 
                    :show-text="false"
                    :color="project.color"
                  />
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速操作区域 -->
    <el-card class="content-card quick-actions-card" shadow="never">
      <template #header>
        <div class="card-header">
          <div class="header-title">
            <el-icon><Operation /></el-icon>
            <span>快速操作</span>
          </div>
        </div>
      </template>
      
      <el-row :gutter="16">
        <el-col :xs="12" :sm="6" :lg="3">
          <div class="quick-action-item" @click="showUploadDialog = true">
            <div class="action-icon upload">
              <el-icon><Upload /></el-icon>
            </div>
            <div class="action-title">上传文档</div>
          </div>
        </el-col>
        
        <el-col :xs="12" :sm="6" :lg="3">
          <div class="quick-action-item" @click="$router.push('/search')">
            <div class="action-icon search">
              <el-icon><Search /></el-icon>
            </div>
            <div class="action-title">高级搜索</div>
          </div>
        </el-col>
        
        <el-col :xs="12" :sm="6" :lg="3">
          <div class="quick-action-item" @click="$router.push('/projects')">
            <div class="action-icon project">
              <el-icon><Plus /></el-icon>
            </div>
            <div class="action-title">新建项目</div>
          </div>
        </el-col>
        
        <el-col :xs="12" :sm="6" :lg="3">
          <div class="quick-action-item" @click="$router.push('/analytics')">
            <div class="action-icon analytics">
              <el-icon><DataLine /></el-icon>
            </div>
            <div class="action-title">数据统计</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 文档上传对话框 -->
    <el-dialog
      v-model="showUploadDialog"
      title="上传文档"
      width="500px"
      :before-close="closeUploadDialog"
    >
      <DocumentUpload @success="handleUploadSuccess" @cancel="showUploadDialog = false" />
    </el-dialog>

    <!-- 文档预览对话框 -->
    <el-dialog
      v-model="showPreviewDialog"
      :title="currentPreviewDoc?.title"
      width="80%"
      top="5vh"
      :before-close="closePreviewDialog"
    >
      <DocumentPreview v-if="currentPreviewDoc" :document="currentPreviewDoc" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useDocumentStore } from '@/store/document'
import { useProjectStore } from '@/store/project'
import { ElMessage } from 'element-plus'
import {
  Upload, Plus, Document, FolderOpened, Search, Timer,
  TrendCharts, Bottom, ArrowRight, View, Download, Operation,
  Present, Reading, Picture, DataLine
} from '@element-plus/icons-vue'
import DocumentUpload from '@/components/DocumentUpload.vue'
import DocumentPreview from '@/components/DocumentPreview.vue'

const router = useRouter()
const documentStore = useDocumentStore()
const projectStore = useProjectStore()

// 响应式数据
const showUploadDialog = ref(false)
const showPreviewDialog = ref(false)
const currentPreviewDoc = ref(null)

// 方法
const formatTime = (timeStr) => {
  const now = new Date()
  const time = new Date(timeStr)
  const diff = now - time
  
  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(minutes / 60)
  const days = Math.floor(hours / 24)
  
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`
  
  return time.toLocaleDateString()
}

const getProjectDocumentCount = (project) => {
  return project.documents ? project.documents.length : 0
}

const previewDocument = (doc) => {
  currentPreviewDoc.value = doc
  showPreviewDialog.value = true
  documentStore.incrementUsageCount(doc.id)
}

const downloadDocument = (doc) => {
  ElMessage.success(`开始下载：${doc.title}`)
  documentStore.incrementUsageCount(doc.id)
}

const viewProject = (project) => {
  router.push(`/documents?project=${project.id}`)
}

const closeUploadDialog = () => {
  showUploadDialog.value = false
}

const closePreviewDialog = () => {
  showPreviewDialog.value = false
  currentPreviewDoc.value = null
}

const handleUploadSuccess = () => {
  showUploadDialog.value = false
  ElMessage.success('文档上传成功！')
}
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 20px;
  min-height: 100%;
}

.page-header {
  margin-bottom: 24px;
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    .page-title {
      font-size: 28px;
      font-weight: 600;
      color: var(--el-text-color-primary);
      margin-bottom: 4px;
    }
    
    .page-subtitle {
      color: var(--el-text-color-secondary);
      font-size: 14px;
    }
    
    .header-actions {
      display: flex;
      gap: 12px;
    }
  }
}

.stats-section {
  margin-bottom: 24px;
  
  .stat-card {
    height: 120px;
    border-radius: 12px;
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-4px);
      box-shadow: var(--el-box-shadow-light);
    }
    
    :deep(.el-card__body) {
      padding: 20px;
      height: 100%;
    }
  }
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
  
  .stat-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    font-size: 24px;
    color: white;
    
    &.primary {
      background: linear-gradient(135deg, #409EFF, #66b1ff);
    }
    
    &.success {
      background: linear-gradient(135deg, #67C23A, #85ce61);
    }
    
    &.warning {
      background: linear-gradient(135deg, #E6A23C, #ebb563);
    }
    
    &.info {
      background: linear-gradient(135deg, #909399, #a6a9ad);
    }
  }
  
  .stat-info {
    flex: 1;
    
    .stat-value {
      font-size: 32px;
      font-weight: 700;
      color: var(--el-text-color-primary);
      line-height: 1;
      margin-bottom: 4px;
    }
    
    .stat-label {
      font-size: 14px;
      color: var(--el-text-color-secondary);
      margin-bottom: 6px;
    }
    
    .stat-trend {
      display: flex;
      align-items: center;
      font-size: 12px;
      gap: 4px;
      
      &.positive {
        color: var(--el-color-success);
      }
      
      &.negative {
        color: var(--el-color-danger);
      }
    }
  }
}

.main-content {
  margin-bottom: 24px;
}

.content-card {
  border-radius: 12px;
  
  :deep(.el-card__header) {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--el-border-color-lighter);
  }
  
  :deep(.el-card__body) {
    padding: 20px 24px;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .header-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    gap: 8px;
  }
}

.document-list {
  .document-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--el-border-color-lighter);
    cursor: pointer;
    transition: all 0.2s;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:hover {
      background: var(--el-fill-color-lighter);
      margin: 0 -12px;
      padding-left: 12px;
      padding-right: 12px;
      border-radius: 8px;
      
      .document-actions {
        opacity: 1;
      }
    }
    
    .document-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      font-size: 18px;
      color: white;
      
      &.pdf {
        background: linear-gradient(135deg, #f56c6c, #f78989);
      }
      
      &.doc {
        background: linear-gradient(135deg, #409eff, #66b1ff);
      }
      
      &.ppt {
        background: linear-gradient(135deg, #e6a23c, #ebb563);
      }
      
      &.img {
        background: linear-gradient(135deg, #67c23a, #85ce61);
      }
    }
    
    .document-info {
      flex: 1;
      
      .document-title {
        font-size: 14px;
        font-weight: 500;
        color: var(--el-text-color-primary);
        margin-bottom: 6px;
        line-height: 1.2;
      }
      
      .document-meta {
        display: flex;
        gap: 12px;
        font-size: 12px;
        color: var(--el-text-color-secondary);
        
        .document-project {
          color: var(--el-color-primary);
          font-weight: 500;
        }
      }
    }
    
    .document-actions {
      display: flex;
      gap: 8px;
      opacity: 0;
      transition: opacity 0.2s;
    }
  }
}

.project-list {
  .project-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--el-border-color-lighter);
    cursor: pointer;
    transition: all 0.2s;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:hover {
      background: var(--el-fill-color-lighter);
      margin: 0 -12px;
      padding-left: 12px;
      padding-right: 12px;
      border-radius: 8px;
    }
    
    .project-color {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .project-info {
      flex: 1;
      
      .project-name {
        font-size: 14px;
        font-weight: 500;
        color: var(--el-text-color-primary);
        margin-bottom: 6px;
      }
      
      .project-meta {
        display: flex;
        gap: 12px;
        font-size: 12px;
        color: var(--el-text-color-secondary);
        margin-bottom: 8px;
      }
      
      .project-progress {
        margin-top: 8px;
      }
    }
  }
}

.quick-actions-card {
  .quick-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
      background: var(--el-fill-color-light);
      transform: translateY(-2px);
    }
    
    .action-icon {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;
      margin-bottom: 12px;
      
      &.upload {
        background: linear-gradient(135deg, #409EFF, #66b1ff);
      }
      
      &.search {
        background: linear-gradient(135deg, #67C23A, #85ce61);
      }
      
      &.project {
        background: linear-gradient(135deg, #E6A23C, #ebb563);
      }
      
      &.analytics {
        background: linear-gradient(135deg, #F56C6C, #f78989);
      }
    }
    
    .action-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--el-text-color-primary);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .dashboard {
    padding: 16px;
  }
  
  .page-header .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .main-content {
    .el-col {
      margin-bottom: 20px;
    }
  }
}
</style>